<template>
  <div class="wapper">
    <div class="search">
      <div class="back iconfont" @click="handleBackClick">&#xe606;</div>
      <div class="search_content">
        <span class="search_content_icon iconfont">&#xe898;</span>
        <input
          type="text"
          class="search_content_input"
          placeholder="请输入商品名称搜索"
        />
      </div>
    </div>
    <ShopInfo :item="data.item" :showBorder="false" v-show="data.item.imgUrl" />
  </div>
  <Content :shopName="data.item.name" />
  <Cart />
</template>

<script>
import ShopInfo from "../../components/ShopInfo";
import { useRouter, useRoute } from "vue-router";
import { reactive } from "vue";
import { get } from "../../utils/request";
import Content from "./Content";
import Cart from "./Cart";
// 根据路由的不同获取数据
const useShopInfoEffect = () => {
  const route = useRoute();
  const data = reactive({ item: {} });
  const getItemData = async () => {
    const result = await get(`api/shop/${route.params.id}`);
    if (result.errno === 0) {
      data.item = result.data;
    }
  };
  return { data, getItemData };
};
// 点击后退
const useHandleBackEffect = () => {
  const router = useRouter();
  const handleBackClick = () => {
    router.back();
  };
  return { handleBackClick };
};
export default {
  name: "Shop",
  components: { ShopInfo, Content, Cart },
  setup() {
    const { handleBackClick } = useHandleBackEffect();
    const { data, getItemData } = useShopInfoEffect();
    getItemData();
    return { data, handleBackClick };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wapper {
  margin: 0 0.18rem;
}
.search {
  display: flex;
  margin: 0.16rem 0;
  .back {
    line-height: 0.32rem;
    font-size: 0.2rem;
    color: #b7b7b7;
  }
  .search_content {
    position: relative;
    flex: 1;
    margin-left: 0.12rem;
    .search_content_icon {
      position: absolute;
      left: 0.1rem;
      font-size: 0.16rem;
      color: #b7b7b7;
      line-height: 0.32rem;
    }
    .search_content_input {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 0 0.3rem;
      font-size: 0.16rem;
      border: 0;
      outline: none;
      background-color: $ibput-bgcolor;
      border-radius: 0.32rem;
    }
  }
}
</style>
